<template>
  <div>
    <div class="home-banner">
    </div>
    <div class="measure">
      <div class="measure-name">
        <div class="measure-namelist">
          <div :class="courselist === '1' ? 'tapelist' : 'tapelistname'" @click="course(1)">
            全部练习
          </div>
          <div :class="courselist === '2' ? 'tapelist' : 'tapelistname'" @click="course(2)">
            错题练习
          </div>
          <div :class="courselist === '3' ? 'tapelist' : 'tapelistname'" @click="course(3)">
            每日练习
          </div>
        </div>
        <div>
          <!-- <a-input class="inputwidth"  placeholder="您输入知识点">
            <template #prefix>
              <icon-search />
            </template> </a-input><span class="oval-search-button">搜索</span> -->
        </div>
      </div>
    </div>
    <div class="substance" v-if="courselist === '1'">
      <div class="substance-top">
        <div class="substance-text">
          <img src="/img/lianxi-1.png" alt="" />
          答对题数
        </div>
        <div class="substance-nubmel">{{ sum.correct_sum }}</div>
      </div>
      <div class="substance-top">
        <div class="substance-text">
          <img src="/img/lianxi-2.png" alt="" />
          答题总数
        </div>
        <div class="substance-nubmel">{{ sum.total }}</div>
      </div>
      <div class="substance-top">
        <div class="substance-text">
          <img src="/img/lianxi-3.png" alt="" />
          正确率
        </div>
        <div class="substance-nubmel">{{ sum.accuracy }}%</div>
      </div>
    </div>
    <div v-if="courselist === '1'" style="margin-top: 1vw">
      <a-table :pagination="false" :data="formRecordInfo" :bordered="false" row-key="klID" :style="{ width: '100%', }">
        <template #columns>
          <!-- <a-table-column
            title="知识点id"
            align="center"
            data-index="klID"
            width="150"
          ></a-table-column> -->
          <a-table-column title="知识点" align="center" data-index="klName" width="150"></a-table-column>
          <a-table-column title="刷题数" align="center" data-index="name" width="150">
            <template #cell="{ record }">
              <span>{{ record.rightAmount }}/{{ record.allAmount }}</span>
            </template>
          </a-table-column>
          <a-table-column title="操作" align="center" data-index="name" width="150">
            <template #cell="{ record }">
              <!-- class="practice" -->
              <a-button type="primary" size="small" class="practice"
                @click="problemsolving(record, '1')">开始练习</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div class="substance-tou" v-if="courselist === '2'">
      <!-- :default-active-key="['1', 2]" Mo -->
      <a-table :pagination="false" :data="rongquestion" :bordered="false" row-key="klID" :style="{ width: '100%', }">
        <template #columns>
          <!-- <a-table-column
            title="知识点id"
            align="center"
            data-index="klID"
            width="150"
          ></a-table-column> -->
          <a-table-column title="知识点" align="center" data-index="klName" width="150"></a-table-column>
          <a-table-column title="错题数" align="center" data-index="amount" width="150">
            <template #cell="{ record }">
              <span>{{ record.amount }}</span>
            </template>
          </a-table-column>
          <a-table-column title="操作" align="center" data-index="name" width="150">
            <template #cell="{ record }">
              <a-button type="primary" size="small" class="practice" v-if="Number(record.amount) > 0"
                @click="problemsolving(record, '2')">查看题目</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div class="substance-three" v-if="courselist === '3'">
      <!-- :default-active-key="['1', 2]" Mo -->

      <a-table :pagination="false" :data="dailypractice" :bordered="false" row-key="KlID">
        <template #columns>
          <!-- <a-table-column
            title="知识点id"
            align="center"
            data-index="KlID"
            width="150"
          ></a-table-column> -->
          <a-table-column title="知识点" align="center" data-index="KlName" width="150"></a-table-column>
          <!-- <a-table-column
            title="题数"
            align="center"
            data-index="amount"
            width="150"
          >
            <template #cell="{ record }">
              <span>{{ record.amount }}</span>
            </template>
    </a-table-column> -->
          <a-table-column title="操作" align="center" data-index="name" width="150">
            <template #cell="{ record }">
              <a-button type="primary" size="small" class="practice"
                @click="problemsolving(record, '3')">开始练习</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
  RecordreturnRecordInfo,
  Recordrecorderr,
  RecordrecordOne,
  RecordwrongTestList,
} from "@/api/practise";
import useUserStore from "@/store/modules/user";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import { getPermission } from "@/utils/subject";
const userStore = useUserStore();
const router = useRouter();
const subjectID = userStore.$state.subjectID;
const courselist = ref("1");
const subjectIDname = ref();
// 全部课程
const course = (e: any) => {
  courselist.value = String(e);

  if (courselist.value == "2") {
    question();
  } else if (courselist.value == "3") {
    practice();
  } if (courselist.value == "1") {
    returnRecordInfo();
  }
};
const data = reactive([
  {
    key: "1",
    name: "Jane Doe",
    salary: 23000,
    className: "32 ",
    email: "jane.doe@example.com",
    expand: "Expand Data",
  },
  {
    key: "2",
    name: "Alisa Ross",
    className: 25000,
    address: "35 Park Road, London",
    email: "alisa.ross@example.com",
  },
  {
    key: "3",
    name: "Kevin Sandra",
    className: 22000,
    address: "31 Park Road, London",
    email: "kevin.sandra@example.com",
  },
  {
    key: "4",
    name: "Ed Hellen",
    className: 17000,
    address: "42 Park Road, London",
    email: "ed.hellen@example.com",
  },
  {
    key: "5",
    name: "William Smith",
    className: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
  {
    key: "5",
    name: "William Smith",
    className: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
]);

const sayHello = () => { };

const sum = reactive({
  accuracy: 0, //正确率
  correct_sum: 0, //答对数
  total: 0, //总数
});
const formRecordInfo = ref();
const returnRecordInfo = () => {
  if (subjectIDname.value) {
    RecordreturnRecordInfo({ subjectID: Number(subjectIDname.value) }).then(
      (res: any) => {
        formRecordInfo.value = res.list.map((item: any) => {
          // console.log(item.sub, "?练");
          const { sub, ...rest } = item;
          return { children: sub, ...rest };
        });
        sum.accuracy = res.sum.accuracy;
        sum.correct_sum = res.sum.correct_sum;
        sum.total = res.sum.total;

      }
    );
  }
};

//错题练习
const rongquestion = ref();

const question = () => {
  Recordrecorderr({ sid: Number(subjectIDname.value) }).then((res: any) => {
    rongquestion.value = res.map((item: any) => {
      // console.log(item.sub, "?练");
      const { sub, ...rest } = item;
      return { children: sub, ...rest };
    });
  });
};
// 每日练习
const dailypractice = ref();
const practice = () => {
  // let subjectIDname = subjectID;
  RecordrecordOne({ sid: Number(subjectIDname.value) }).then((res: any) => {
    dailypractice.value = res.info
    // .map((item) => {
    //   const convert = (obj) => {
    //     const { sub, ...rest } = obj;
    //     if (sub) {
    //       return {
    //         children: sub.map(convert),
    //         ...rest,
    //       };
    //     }
    //     return rest;
    //   };
    //   return convert(item);
    // });
  });
};
const problemsolving = (record: any, index: any) => {

  if (!getPermission(userStore.$state.subjectID)) {
    // 替换为你的实际权限ID
    // 没有权限时显示提示
    Message.warning("您没有权限访问此内容，请联系管理员");
    return;
  }
  if (index == 1) {
    router.push({
      path: "/Measure/answerQuestions",
      query: {
        klID: record.klID,
        saveName: record.klName,
        subjectID: subjectIDname.value,
        type: 4,
      },
    });
  } else if (index == 2) {
    router.push({
      path: "/Practise/viewth",
      query: {
        klID: record.klID,
        saveName: record.klName,
        subjectID: subjectIDname.value,
        type: 4,
      },
    });
  } else if (index == 3) {
    router.push({
      path: "/Measure/answerQuestions",
      query: {
        klID: record.KlID,
        saveName: record.KlName,
        subjectID: subjectIDname.value,
        type: 4,
      },
    });
  }
};

watch(
  () => userStore.$state.subjectID,
  async (newValue, oldValue) => {

    subjectIDname.value = newValue;
    // form.sid = userStore.$state.subjectID;
    // Id.value = userStore.$state.subjectID;
    try {
      if (userStore.$state.subjectID) {
        // console.log(courselist.value, "??");
        if (courselist.value == "1") {

          await returnRecordInfo();
        } else if (courselist.value == "2") {
          await question();
        } else if (courselist.value == "3") {
          await practice();
        }
      }
    } catch (error) {
      console.error("获取数据出错:", error);
    }
  },
  { immediate: true }
);

onMounted(() => {
  subjectIDname.value = subjectID;
  // returnRecordInfo();
});
</script>
<style lang="less" scoped>
/* 鼠标经过表格行时改变背景颜色 */
:deep.ant-table-tbody>tr:hover>td {
  background-color: #f5f5f5;
}

.home-banner {
  width: 100%;
  height: 200px;
  background-color: #fff;
  background-image: url("/img/shanyaozhe.png");
  background-size: 100% 100%;
  border-radius: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

//头部样式
.measure {
  // width: 100%;
  height: 70px;
  background: #0075ff;
  border-radius: 8px;
  border-top: 1px solid #0075ff;
}

.measure-name {
  line-height: 70px;
  margin-top: 5px;
  padding: 0 1vw;
  background: #fff;
  border-radius: 8px;
  display: flex;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}

.measure-namelist {
  display: flex;
  width: 15vw;
  cursor: pointer;
  justify-content: space-between;
  font-size: 1vw;

  .tapelist {
    //  width: 15vw;
    position: relative;
    display: inline-block;
  }

  .tapelistname {
    // width: 200px;
    color: #8393a3;
  }

  .tapelist::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    /* 调整下划线与文本的间距 */
    width: 100%;
    height: 2px;
    /* 加粗下划线，可根据需要调整 */
    background-color: #0075ff;
    box-shadow: 0 0 5px #0075ff;
    /* 添加阴影效果，可根据需要调整 */
  }
}

.inputwidth {
  width: 10vw;
}

.oval-search-button {
  display: inline-block;
  padding: 0 1vw;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  background-color: #1890ff;
  /* 按钮背景色，可根据需要修改 */
  color: #fff;
  /* 按钮文字颜色，可根据需要修改 */
  cursor: pointer;
}

.substance {
  margin-top: 1vw;
  display: flex;
  justify-content: space-between;
}

.substance-top {
  width: 25%;
  height: 120px;
  line-height: 120px;
  display: flex;
  padding: 0 2vw;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #f7fbff;
  border-radius: 8px;
}

.substance-text {
  font-weight: 500;
  font-size: 1vw;
  display: grid;
  align-items: center;
  /* 垂直方向上居中对齐 */
  grid-template-columns: auto auto;
  /* 两列，自动适应内容宽度 */
  grid-column-gap: 5px;
  /* 列之间的间距，可根据需要调整 */
  color: #8393a3;
  text-align: left;
  font-style: normal;
}

.substance-text img {
  width: 2vw;
  height: 4vh
}

.substance-nubmel {
  font-weight: 500;
  font-size: 2vw;
  color: #03305c;
}

.practice {
  font-weight: 400;
  font-size: 16px;
  // color: #0075ff;
  cursor: pointer;
  text-align: center;
  // text-decoration: underline;
  font-style: normal;
  // text-decoration-line: underline;
}

.collapse {
  display: flex;
  justify-content: space-between;
}

.substance-tou {
  margin-top: 1vw;
  width: 100%;
}

.substance-three {
  margin-top: 1vw;
  width: 100%;
}

/* 允许子元素在必要时换行 */
// flex-wrap: wrap;
@media (max-width: 768px) {
  .substance {
    margin-top: 3vw;
    display: flex;
    justify-content: space-between;
  }

  .namelisy {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    // height: 330px;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #ededed;
    font-size: 1vw;
  }

  .tapelist {
    //  width: 15vw;
    font-size: 3vw;
  }

  .tapelistname {
    // width: 200px;
    font-size: 3vw;
    color: #8393a3;
  }

  .substance {
    margin-top: 1vw;
  }

  .substance-top {
    width: 33%;
    height: 60px;
    line-height: 60px;
    margin: 10px auto;
    flex-wrap: wrap;
    background: #f7fbff;
    border-radius: 8px;
    padding: 0px 5px;
  }

  .substance-top img {
    display: none;
  }

  .substance-nubmel {
    font-weight: 500;
    font-size: 4vw;
    color: #03305c;
  }

  .substance-text {
    font-weight: 500;
    font-size: 3vw;
    display: grid;
    align-items: center;
    /* 垂直方向上居中对齐 */
    grid-template-columns: auto auto;
    /* 两列，自动适应内容宽度 */
    grid-column-gap: 5px;
    /* 列之间的间距，可根据需要调整 */
    color: #8393a3;
    text-align: left;
    font-style: normal;
  }

  .substance-text img {
    width: 7vw;
    height: 4vh
  }

  .measure-namelist {
    display: flex;
    width: 40vw;
    justify-content: space-between;
    font-size: 3vw;

    .tapelist {
      // width: 5vw;
      position: relative;
      display: inline-block;
    }

    .tapelist::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 20px;
      /* 调整下划线与文本的间距 */
      width: 100%;
      height: 2px;
      /* 加粗下划线，可根据需要调整 */
      background-color: #0075ff;
      box-shadow: 0 0 5px #0075ff;
      /* 添加阴影效果，可根据需要调整 */
    }
  }

  .inputwidth {
    width: 30vw;
  }

  .measure-name {
    // width: 100%
    // height: 70px;
    // line-height: 7vh;
    margin-top: 5px;
    padding: 0 1vw;
    background: #fff;
    border-radius: 8px;
    display: flex;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
  }
}
</style>
